<template>
  <div>
    <basePage>
      <el-card>
        <el-row class="diy-row" :gutter="12">
          <el-col :span="2">
            <el-button type="primary" @click="showCreateDialog"
              >添加接口</el-button
            >
          </el-col>
          <el-col :span="6">
            <el-input
              placeholder="请输入内容"
              v-model="query"
              clearable
              @clear="removeSearch"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchApi"
              ></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="interfaceList" style="width: 100%" border stripe>
          <el-table-column prop="name" label="接口名称"></el-table-column>
          <el-table-column prop="url" label="接口地址"></el-table-column>
          <el-table-column
            prop="project_mark"
            label="项目代号"
          ></el-table-column>
          <el-table-column
            prop="desc"
            label="接口描述"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="enabled" label="状态">
            <template scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#ff4949"
                @change="changeStatus(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="180px">
            <template scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="showEditDiaglog(scope.row.id)"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="removeApi(scope.row.id)"
              ></el-button>
              <el-tooltip
                class="item"
                effect="dark"
                content="用例详情"
                placement="top"
              >
                <el-button
                  type="warning"
                  icon="el-icon-s-data"
                  size="mini"
                  @click="toCasePage(scope.row.id)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 添加编辑接口dialog -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="apiDialogVisible"
        width="30%"
        @close="closeDialog"
      >
        <el-form
          :model="apiInfo"
          :rules="apiInfoRules"
          ref="apiInfoRef"
          label-width="100px"
        >
          <el-form-item label="接口名称" prop="name">
            <el-input
              v-model="apiInfo.name"
              placeholder="请输入接口名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="接口地址" prop="url">
            <el-input
              v-model="apiInfo.url"
              placeholder="请输入接口地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目代号" prop="project_id">
            <el-select
              v-model="apiInfo.project_id"
              placeholder="请选择项目代号"
              clearable
            >
              <el-option
                v-for="project in projectList"
                :key="project.id"
                :label="project.mark"
                :value="project.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="接口描述" prop="desc">
            <el-input
              v-model="apiInfo.desc"
              placeholder="请输入接口描述"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="apiDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="createOrEditApi">确 定</el-button>
        </span>
      </el-dialog>
    </basePage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      interfaceList: [],
      query: '',
      apiDialogVisible: false,
      dialogTitle: '',
      createApi: null,
      apiInfo: {
        name: '',
        url: '',
        desc: '',
        project_id: null
      },
      apiInfoRules: {
        name: [
          {
            required: true,
            message: '请输入接口名称',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: '请输入接口地址',
            trigger: 'blur'
          }
        ],
        project_id: [
          {
            required: true,
            message: '请选择项目代号',
            trigger: 'change',
            type: 'number'
          }
        ]
      },
      projectList: []
    }
  },
  created() {
    this.getInterfaceList()
  },
  methods: {
    // 获取接口列表
    getInterfaceList() {
      this.$http
        .get('/core/api/list')
        .then(res => {
          console.log(res.data)
          const resData = res.data
          if (resData.code === 200) {
            this.interfaceList = resData.data.list
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    // 获取项目列表
    getProjectList() {
      this.$http
        .get('/core/project/list')
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.projectList = resData.data.list
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    removeSearch() {
      this.getInterfaceList()
    },
    searchApi() {
      this.$http
        .get(`/core/api/search?query=${this.query}`)
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.interfaceList = resData.data.list
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    // 跳转到接口用例
    toCasePage(apiId) {
      this.$router.push({ path: '/interface/case', query: { id: apiId } })
    },
    // 添加接口
    showCreateDialog() {
      // 获取项目数据
      this.getProjectList()
      this.dialogTitle = '添加接口'
      this.createApi = true
      this.apiDialogVisible = true
    },
    // 编辑接口
    showEditDiaglog(id) {
      this.getProjectList()
      this.dialogTitle = '编辑接口'
      this.createApi = false

      this.$http
        .get(`/core/api/queryApiInfo?id=${id}`)
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.apiInfo = resData.data.list[0]
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
      this.apiDialogVisible = true
    },
    // 添加或编辑接口
    createOrEditApi() {
      if (this.createApi) {
        this.$refs.apiInfoRef.validate(valid => {
          if (valid) {
            this.$http
              .post('/core/api/create', this.apiInfo)
              .then(res => {
                const resData = res.data
                if (resData.code === 200) {
                  this.apiDialogVisible = false
                  this.getInterfaceList()
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
              })
              .catch(err => {
                return this.$message.error(err)
              })
          }
        })
      } else {
        // 编辑接口
        this.$refs.apiInfoRef.validate(valid => {
          if (valid) {
            this.$http
              .post('/core/api/update', this.apiInfo)
              .then(res => {
                const resData = res.data
                if (resData.code === 200) {
                  this.apiDialogVisible = false
                  this.getInterfaceList()
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
              })
              .catch(err => {
                return this.$message.error(err)
              })
          }
        })
      }
    },
    // 关闭dialog操作, 清空表单数据
    closeDialog() {
      this.$refs.apiInfoRef.resetFields()
    },
    // 删除接口
    removeApi(id) {
      this.$confirm('此操作将永久删除该接口, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http
            .post('/core/api/delete', { id: id })
            .then(res => {
              const resData = res.data
              if (resData.code === 200) {
                this.getInterfaceList()
                this.$message.success(resData.msg)
              } else {
                return this.$message.error(resData.msg)
              }
            })
            .catch(err => {
              return this.$message.error(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    changeStatus(info) {
      this.$http
        .get(`core/api/changeStatus?id=${info.id}`)
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.$message.success(resData.msg)
          } else {
            info.status = !info.status
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          info.status = !info.status
          return this.$message.error(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
@import './Interface.less';
</style>
